<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#box1{
			width: 200px;
			height: 200px;
			background: #00B7FF;
		}
	</style>
	<body>
		<div id="box">
			  <div id="box1" v-lee>
			  	
			  </div>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		Vue.directive('lee', {
			inserted(a, b) {
				a.style.position = 'absolute'
				a.onmousedown = function(event) {
					var downY = event.offsetY 
					var downX = event.offsetX  
					console.log()
					document.onmousemove = function(event) {
						var moveY = event.clientY-downY  
						var moveX = event.clientX-downX  
						a.style.top = moveY+'px'
						a.style.left = moveX+'px'
					}
					document.onmouseup = function() {
						document.onmousemove = ''
					}
				}
			}
		})
		new Vue({
			el:"#box"
		})
	</script>
</html>
